<template>
  <div class="article">
    <div class="header">
      <el-button type="primary" class="add" @click="openDialog">
        新增
      </el-button>
    </div>
    <el-table :data="list" style="width: 100%" v-loading="loading">
      <el-table-column label="主标题" width="200">
        <template #default="{ row }">
          <div class="title text">{{ row.title }}</div>
        </template>
      </el-table-column>
      <el-table-column label="描述">
        <template #default="{ row }">
          <div class="desc text">
            {{ row.desc }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="描述">
        <template #default="{ row }">
          <div class="desc text">{{ row.desc }}</div>
        </template>
      </el-table-column>
      <el-table-column label="封面图" width="150">
        <template #default="{ row }">
          <img class="poster" :src="row.poster" alt="封面" />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="warning" @click="updateData(row.id, row.detail_id)"
            >编辑</el-button
          >
          <el-popconfirm
            title="确定要删除此轮播图吗"
            @confirm="deleteData(row.id, row.detail_id)"
          >
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
            <template #actions="{ confirm, cancel }">
              <el-button size="small" @click="cancel">取消</el-button>
              <el-button type="danger" size="small" @click="confirm">
                确定
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="5"
      :total="count"
      @change="pageChangeHandler"
    />

    <!-- 修改增加的弹层 -->
    <el-dialog :title="optionDoalogTitle" v-model="optionDialogVisible">
      <el-form :model="optionForm" v-loading="loading">
        <el-form-item label="标题" label-width="80px">
          <el-input
            type="textarea"
            v-model="optionForm.title"
            :autosize="{ minRows: 2, maxRows: 10 }"
            placeholder="请输入标题..."
          ></el-input>
        </el-form-item>
        <el-form-item label="描述" label-width="80px">
          <el-input
            type="textarea"
            v-model="optionForm.desc"
            :autosize="{ minRows: 5, maxRows: 10 }"
            placeholder="请输入描述..."
          ></el-input>
        </el-form-item>
        <el-form-item label="封面图" label-width="80px">
          <ImageView
            :src="[optionForm.poster]"
            @addImage="addPoster"
            @deleteImage="deletePoster"
          ></ImageView>
        </el-form-item>
        <div v-if="optionDoalogTitle === '编辑'">
          <template
            v-for="(item, index) in optionForm.article_detail"
            :key="index"
          >
            <el-form-item label="内容" label-width="80px" v-if="item.title">
              <el-input
                type="textarea"
                v-model="item.title"
                :autosize="{ minRows: 5, maxRows: 10 }"
                placeholder="详情内容..."
              ></el-input>
            </el-form-item>
            <el-form-item label="图片" label-width="80px">
              <ImageView
                :src="item.image"
                :parentIndex="index"
                :multiplication="true"
                @addImage="addImage"
                @deleteImage="deleteImage"
              ></ImageView>
            </el-form-item>
          </template>
        </div>
        <div v-if="optionDoalogTitle === '新增'">
          <template
            v-for="(item, index) in optionForm.article_detail"
            :key="index"
          >
            <el-form-item
              label="内容"
              label-width="80px"
              v-if="item.title || optionDoalogTitle === '新增'"
            >
              <el-input
                type="textarea"
                v-model="item.title"
                :autosize="{ minRows: 5, maxRows: 10 }"
                placeholder="详情内容..."
              ></el-input>
            </el-form-item>
            <el-form-item label="图片" label-width="80px">
              <ImageView
                :src="item.image"
                :parentIndex="index"
                :multiplication="true"
                @addImage="addImage"
                @deleteImage="deleteImage"
              ></ImageView>
            </el-form-item>
          </template>
        </div>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="optionDialogVisible = false">取消</el-button>
          <el-button
            v-if="optionDoalogTitle === '新增'"
            type="warning"
            @click="addContent"
            >增加内容</el-button
          >
          <el-button type="primary" @click="submit" :loading="loading"
            >确定</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
import ImageView from '@/base-ui/image-view/index.vue'

import { normalOptions } from '@/hooks/normalOptions'
import {
  deleteArticleApi,
  getArticleListApi,
  updateArticleApi,
  addArticleApi
} from '@/api'
import { upload } from '@/api'

const props = defineProps({
  activeName: {
    type: String,
    default: ''
  }
})

const page = ref<number>(1) // 页码
const size = ref<number>(5) // 每页条数

const optionForm = reactive({
  // 表单数据
  id: '',
  title: '',
  desc: '',
  poster: '',
  detail_id: '',
  article_detail: [] as any
})

// 赋值数据
const assignmentData = (row: typeof optionForm) => {
  for (const key in optionForm) {
    optionForm[key as keyof typeof optionForm] = row[key as keyof typeof row]
  }
}

// 清空表单数据
const clearFormData = () => {
  for (const key in optionForm) {
    optionForm[key as keyof typeof optionForm] = ''
  }
  optionForm.article_detail = []
}

const {
  loading,
  optionDoalogTitle,
  optionDialogVisible,
  list,
  count,
  getList,
  updateData,
  submitUpdateData,
  uploadFile,
  pageChangeHandler,
  deleteData,
  openDialog,
  addData
} = normalOptions({
  dialogFormData: optionForm,
  getList: getArticleListApi,
  assignmentData: assignmentData,
  updateData: updateArticleApi,
  uploadFile: upload,
  deleteData: deleteArticleApi,
  clearFormData: clearFormData,
  addData: addArticleApi
})

// 获得列表数据
watch(
  () => props.activeName,
  async () => {
    if (list.value.length > 0) return
    const res = await getList(page.value, size.value)
    list.value = res.value
  },
  {
    immediate: true
  }
)

// 选择了描述的图片
const addImage = async (f: FileList, parentIndex?: any) => {
  let arr: any[] = []
  if (f.length) {
    arr = Array.from(f)
  } else {
    arr[0] = f
  }
  for (let i = 0; i < arr.length; i++) {
    const res = await uploadFile(arr[i])
    optionForm.article_detail[parentIndex].image.push(res)
  }
}

// 删除描述的图片
const deleteImage = (index: number, parentIndex: number) => {
  optionForm.article_detail[parentIndex].image.splice(index, 1)
}

//删除封面图
const deletePoster = () => {
  optionForm.poster = ''
}

// 选择了封面图
const addPoster = async (f: FileList) => {
  const res = await uploadFile(f)
  optionForm.poster = res
  console.log(optionForm.poster)
}

// 点击增加内容 新增的时候出现
const addContent = () => {
  optionForm.article_detail.push({
    title: '',
    image: []
  })
}

// 点击提交
const submit = async () => {
  if (optionDoalogTitle.value === '新增') {
    addData(optionForm)
  } else if (optionDoalogTitle.value === '编辑') {
    // 追加数据
    submitUpdateData(optionForm)
  }
}
</script>

<style scoped lang="less">
.article {
  background-color: var(--bgColorTop);
  cursor: pointer;
  .text {
    color: var(--fontColorBase);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .add {
    width: 150px;
  }
  .el-pagination {
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }
  :deep .el-table__row {
    background-color: var(--bgColorTop) !important;
  }
  :deep .el-table__cell {
    color: var(--fontColorBase);
    background-color: var(--bgColorTop) !important;
  }
  :deep .el-table__cell {
    border-bottom-color: var(--bgColorBase) !important;
  }
  :deep .el-table__inner-wrapper::before {
    background-color: var(--bgColorTop);
  }
  :deep .el-dialog {
    background-color: var(--bgColorTop);
  }
  :deep .el-form-item__label {
    color: var(--fontColorBase);
  }
  :deep .el-textarea__inner {
    color: var(--fontColorBase);
    background-color: var(--bgColorTop);
  }
  :deep .el-dialog__title {
    color: var(--fontColorBase);
  }
  .poster {
    width: 100px;
  }
}
</style>
